<template>
  <q-scroll-area class="fit">
    <div class="q-pa-sm">
      <q-card>
        <q-card-section>
          <div class="text-h6">国际化页面</div>
          <div class="text-subtitle2">样例展示--详情可以看此页面源码</div>
        </q-card-section>
        <q-card-section>
          <q-select
            v-model="locale"
            :options="localeOptions"
            label="多语言"
            dense
            borderless
            emit-value
            map-options
            options-dense
            style="min-width: 150px"
          />
        </q-card-section>

        <q-card-section> locale: {{ locale }} </q-card-section>
        <q-card-section> success: {{ $t('success') }} </q-card-section>
        <q-card-section> failed: {{ failStr }} </q-card-section>
      </q-card>
    </div>
  </q-scroll-area>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n({ useScope: 'global' });
locale.value = 'zh-CN';
const localeOptions = [
  { value: 'en-US', label: 'English' },
  { value: 'zh-CN', label: '简体中文' },
];

const failStr = computed(() => t('failed'));
</script>

<style scoped></style>
